<template>
   <swiper
    :slidesPerView="1"
    :spaceBetween="30"
    :loop="true"
    :centeredSlides="true"
    :pagination="{
      el:'.swiper-pagination',
      clickable: true,
    }"
    :autoplay="{
      delay: 2500,
      disableOnInteraction: false,
    }"
    :modules="modules"
    :effectcards="true"
    class="mySwiper"
  >
    <swiper-slide v-for="(imgul,index) in img" :key="index">
        <div class="sw-img" >
            <img :src="imgul">
        </div>
    </swiper-slide>
    <!-- 要自己写分页器需要在这里加上这段代码 -->
    <div class="swiper-pagination"></div>
  </swiper>
</template>

<script setup>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';

import { Autoplay, Pagination, A11y, EffectCards} from "swiper";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/effect-cards";
const modules = [Autoplay, Pagination, A11y, EffectCards];

//轮播图数据
let img = ['http://p1.music.126.net/Qc4dwuPjRkMkPHYBHo_yGA==/109951167822723047.jpg?imageView&quality=89','http://p1.music.126.net/20BBHj6jaHazF0nOsucZVA==/109951167825412388.jpg?imageView&quality=89','http://p1.music.126.net/ezigSvL40dhQxB3fME5eEQ==/109951167822703446.jpg?imageView&quality=89']
</script>
<style scoped lang='less'>
.mySwiper {
  width: 100%;
  background: #ffffff;
  height: 3rem;
  position: relative;
  // 分页器
  .swiper-pagination{
    position: absolute;
    bottom: 0rem;
    // 修改小点颜色
    --swiper-pagination-color: #ffffff;/* 两种都可以 */
    // 修改小点大小
    --swiper-pagination-bullet-width: 0.2rem;
    --swiper-pagination-bullet-height: 0.1rem;
  }
  // 轮播图图片
  .sw-img{
    height: 100%;
    border-radius: 0.15rem;
    img{
        width: 100%;
        height: 100%;
        border-radius: 0.15rem;
    }
  }
}
</style>